<template>
  <div id="bigDiv">
    <head-2 />
    <div id="bigTitle">单位换算</div>
    <div id="countDown">
      倒计时<span id="timeNumber">{{ countDwon }}</span
      >s
    </div>
    <beginView
      :textInfo="this.textInfo"
      @isOpen="getOpen"
      v-if="this.isOpend==1"
    />
    <div id="contentDiv">
      <div id="content">
        <span id="number1">{{ number1 }}</span>
        <span id="unit1">{{ unit1 }}</span>
        <span id="fuhao">{{ fuhao }}</span>
        <span id="number2">{{ number2 }}</span>
        <span id="unit2">{{ unit2 }}</span>
      </div>
    </div>
    <div id="isYes">
      <div id="yes" @click="isPass($event)">√</div>
      <div id="no" @click="isPass($event)">x</div>
    </div>
    <GetScore :userScore="this.userScore" v-if="this.isOpend==4" @onceTime="getOpenOnce"/>
  </div>
</template>
  
  <script>
import head2 from "@/components/Head/head2.vue";
import BeginView from '@/components/beginView/beginView.vue';
import GetScore from '@/components/getScore/getScore.vue';
export default {
  components: { head2,BeginView, GetScore },
  data() {
    return {
      countDwon: 30,
      lengthArr:["cm","dm","m","g","kg"],
      weightArr:["g","kg"],
      number1:0,
      number2:0,
      fuhao:"+",
      unit1:"cm",
      unit2:"dm",
      resuletLast:false,
      countDwon:60,
      isOpend: 1,
      isEnd: false,
      textInfo: {
        val: "游戏开始了，加油小朋友",
        textTitlle: "比一比的玩法介绍",
        textContant:
          "小朋友，每次游戏你都有10秒钟的时间进行游戏，加油！！",
      },
      userScore: {
        score: 0,
        allCount: 14,
        rightCount: 0,
        falseCount: 0,
        rightRate: 0,
        echartId:"compareCount"+new Date()
      },
    };
  },
  watch:{
    isOpend(){
      this.contDwon()
    }
  },
  mounted() {
    //   this.contDwon()
    this.getcontent()
  },
  methods: {
    computedRes(){
      this.countDwon=1
      this.isOpend=4
      this.isEnd = !this.isEnd;
    },
    getRes(){
      this.isOpend=4
    },
    getOpen(val) {
      this.isOpend = val;
    },
    getOpenOnce(val){
      this.isOpend = val;
      this.countDwon=60
      this.userScore.allCount=0
      this.userScore.rightCount=0
      this.userScore.falseCount=0
      this.userScore.rightRate=0
    },
    getcontent() {
        this.number1=Math.floor(Math.random()*100)+1;
        this.number2=Math.floor(Math.random()*10)+1;
        this.number3=Math.floor(Math.random()*10000)+1;
        var charChoose=Math.floor(Math.random()*3)+1;
        switch(charChoose){
          case 1:{
             this.fuhao=">"
             break
          }
          case 2:{
           this.fuhao="<"
           break
          }
          default:{
            this.fuhao="=="
            break
          }
        }
        this.unit1=this.lengthArr.sort(()=>0.5-Math.random())[1]
        if(this.unit1=="cm"){
          this.unit2="dm"
        }
        else if(this.unit1=="dm"){
          this.unit2="m"
        }
        else if(this.unit1=="m"){
          this.unit2="dm"
        }
        else if(this.unit1=="g"){
          this.unit2="kg"
        }
        else if(this.unit1=="kg"){
          this.unit2="g"
        }
        this.resuletLast=this.isEqualLength()
    },
    isEqualLength() {
      // 将所有长度转化为厘米
     switch(this.unit1){
      case "cm":{
        var res=eval(this.number1+this.fuhao+this.number2*10)
        console.log(res,this.number1+this.fuhao+this.number2*10)
        return res
      }case "dm":{
        var res=eval(this.number1+this.fuhao+this.number2*10)
        console.log(res,this.number1+this.fuhao+this.number2*10)
        return res
      }case "m":{
        var res=eval(this.number1*10+this.fuhao+this.number2)
        console.log(res,this.number1*10+this.fuhao+this.number2)
        return res
      }case "kg":{
        this.number1=this.number3
        var res=eval(this.number1+this.fuhao+this.number2)
        console.log(res,this.number1+this.fuhao+this.number2)
        return res
      }case "g":{
        this.number1=this.number3
        var res=eval(this.number1+this.fuhao+this.number2*1000)
        console.log(res,this.number1+this.fuhao+this.number2*1000)
        return res
      }
     }
    },
    contDwon() {
      const timer = setInterval(() => {
        this.countDwon--;
        if (this.countDwon <= 0) {
          // this.userScore.rightRate=this.userScore.rightCount/this.userScore.allCount
          clearInterval(timer);
          this.isOpend=4
          this.isEnd = !this.isEnd;
          // this.isEnd = !this.isEnd;
        }
      }, 1000);
    },
    isPass(e){
      if(this.resuletLast){
        if(e.target.id=="yes"){
          e.target.style.backgroundColor="green"
          this.userScore.rightCount++
        }
        else{
          e.target.style.backgroundColor="red"
          this.userScore.falseCount++
        }
      }
      else{
        if(e.target.id=="yes"){
          e.target.style.backgroundColor="red"
          this.userScore.falseCount++
        }
        else{
          e.target.style.backgroundColor="green"
          this.userScore.rightCount++
        }
      }
      this.userScore.allCount=this.userScore.rightCount+this.userScore.falseCount
      this.userScore.rightRate=this.userScore.rightCount/this.userScore.allCount
      setTimeout(()=>{
        e.target.style.backgroundColor="rgb(199, 120, 241)"
        this.getcontent()
      },1000)
      
    }
  },
};
</script>
  
  <style lang="less" scoped>
#bigDiv {
  height: 100vh;
  #fuhao{
    padding: 5px;
    color: rgb(227, 226, 223);
    font-size: 25px;
    font-weight: bold;
  }
  #isYes {
    width: 60vw;
    display: flex;
    justify-content: space-between;
    margin: -5vw auto;
    #yes,
    #no {
      width: 14vw;
      height: 14vw;
      line-height: 14vw;
      font-size: 20px;
      border-radius: 2px;
      background-color: rgb(199, 120, 241);
    }
  }
  #countDown {
    font-size: 18px;
    font-weight: bold;
    margin-top: 30px;
    letter-spacing: 2px;
    #timeNumber {
      color: red;
    }
  }
  #bigTitle {
    font-weight: bold;
    font-size: 22px;
    margin-top: 20px;
    letter-spacing: 3px;
  }
  #contentDiv {
    height: 40vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    #content {
      width: 45vw;
      height: 15vw;
      line-height: 15vw;
      font-size: 20px;
      letter-spacing: 2px;
      border-radius: 3px;
      background-color: rgb(120, 207, 241);
    }
  }
}
</style>